<!--
 * @Description: 
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2023-04-14 11:39:45
 * @LastEditTime: 2023-05-29 17:51:55
 * @FilePath: \cscec-pms-admin\src\views\project\projectMonthlyReport\detail.vue
-->

<template>
  <base-breadcrumb>
    <a-spin :spinning="loading">
      <!-- 单选组 -->
      <a-affix :offset-top="0" :target="target" style="width:100%">
        <a-radio-group
          v-model="moduleKey"
          @change="moduleChange"
        >
          <a-radio-button
            v-for="item in moduleList"
            :key="item.key"
            :value="item.key"
          >{{ item.title }}</a-radio-button>
        </a-radio-group>
      </a-affix>
      <!-- 单选组 -->
      <!-- 模块 -->
      <components
        :is="tables[moduleKey]"
        :ref="tables[moduleKey]"
        :module="moduleList[moduleKey].modules"
        :mergeCells="activeMergeCells"
        :data="data[moduleKey]"
        @flex="handleFlex(moduleList[moduleKey].modules ,...arguments)"
      />
      <!-- 模块 -->
    </a-spin>
    <div class="page-btn-right-top">
      <a-button @click="$close">
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>
<script>
import { Affix } from 'ant-design-vue'
import { moduleList } from './model.js'
const moduleTable = require.context('./components/moduleTable', false, /.*\.vue$/)
let moduleTableComponents = {}
moduleTable.keys().forEach((fileName) => {
  let comp = moduleTable(fileName)
  moduleTableComponents[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
import { view } from '@/api/project/projectMonthlyReport.js'
export default {
  name: 'projectMonthlyReportDetail' + Date.now(),
  components: {
    ...moduleTableComponents,
    AAffix: Affix
  },
  data() {
    return {
      // 模块列表
      moduleList: this.$clone(moduleList),
      // 模块选中
      moduleKey: '0',
      // 当前激活模块列表
      activeModule: [],
      // 当前模块表格合并规则
      activeMergeCells: [],
      // 加载中
      loading: false,
      // 数据
      data: [],
      // 模块对应接口列表(需要接口按照model定义的顺序定义)
      apis: Object.values(view),
      tables: ['OneTable', 'TwoTable', 'ThreeTable', 'FourTable', 'FiveTable', 'SixTable', 'SevenTable', 'EightTable', 'NineTable']
    }
  },
  created() {
    this.createDataStructure()
  },
  mounted() {
    this.moduleChange()
  },
  methods: {
    target(){
      return document.querySelector('.content-bx')
    },
    /**
     * @description: 模块切换
     * @param {event} e 事件对象
     * @return {void}
     */
    moduleChange(e) {
      this.activeModule = this.moduleList[Number(this.moduleKey)].modules
      this.activeMergeCells = Array.from({ length: this.activeModule.length }, () => [])
      this.getData()
    },
    /**
     * @description: 生成合并数据
     * @param {array} list 数据列表
     * @param {array} dataIndexList 合并字段名
     * @return {array}
     */
    getMergeCells(list, dataIndexList) {
      let arr = []
      if (!Array.isArray(list) || list.length === 0) {
        return arr
      }
      const merge = (el) => {
        for (let i = 0; i < list.length; i++) {
          let row = 0
          let count = 1
          for (let j = i + 1; j < list.length; j++) {
            if (list[i][el.dataIndex] === list[j][el.dataIndex]) {
              // 如果是同一个值，往后递增
              count++
              // 记录当前行
              row = i
              if (j === list.length - 1) {
                if (count > 1) {
                  // 有合并的行
                  arr.push({
                    row,
                    col: el.index,
                    rowspan: count
                  })
                }
                return
              }
            } else {
              // 指针跳转到下一个，从下一排开始
              if (count > 1) {
                // 有合并的行
                arr.push({
                  row,
                  col: el.index,
                  rowspan: count
                })
              }
              i = j - 1
              count = 1
              break
            }
          }
        }
      }
      for (let i = 0; i < dataIndexList.length; i++) {
        merge(dataIndexList[i])
      }
      return arr
    },
    /**
     * @description: 创建数据列表结构初始设置默认空列表
     * @return {void}
     */
    createDataStructure() {
      const data = []
      for (let i = 0; i < this.moduleList.length; i++) {
        data[i] = []
        for (let j = 0; j < this.moduleList[i].modules.length; j++) {
          data[i][j] = []
        }
      }
      this.data = data
    },
    /**
     * @description: 获取数据
     * @return {void}
     */
    async getData() {
      try {
        this.loading = true
        const moduleKey = Number(this.moduleKey)
        // 根据选中模块切换接口查询并赋值对应列表数据(需要保证数据和列表顺序和个数一致)
        const res = await this.apis[moduleKey](this.$route.query.id)
        if (res.code === this.SUCCESS_CODE) {
          // 处理合并行,根据数据模型model对应的列表表头customRender且不等于序号字段
          this.activeModule.forEach((el, index) => {
            // 需要合并的字段名
            const dataIndexList = el.columns
              .map((el, index) => {
                el.index = index
                return el
              })
              .filter((item) => item.hasOwnProperty('customRender') && item.title !== '序号')
            if (dataIndexList.length > 0) {
              // 需要合并的列表设置对应合并字段，index需要数据和列表顺序和个数一致
              this.activeMergeCells.splice(index, 1, this.getMergeCells(res.data[index], dataIndexList))
            }
          })
          // 单独处理本月未竣工项目情况统计的实际竣工时间为'/'
          if(moduleKey === 0){
            res.data[2].map(el=>{
              el.actualCompletionTime = '/'
              return el
            })
          }
          this.data[moduleKey] = res.data
          this.$refs[this.tables[moduleKey]].reloadData(res.data)
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    /**
     * @description: 伸缩表格伸缩事件
     * @param {object} activeModule 全部模块
     * @param {number} index 表格索引
     * @param {string} type 事件类型(oneself:自己,all:全部)
     * @param {boolean} value true:展开,false：收起
     * @return {void}
     */
    handleFlex(activeModule, index, type, value) {
      if (type === 'oneself') {
        activeModule[index].flex = value
      } else {
        activeModule = activeModule.map((el) => {
          el.flex = value
          return el
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
